<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>vue组件测试</title>
	<style>	
		html,
		body,#app {
			height: 100%;
			margin: 0px;
			padding: 0px;
			font-size: 9px;
		}

		.block {
			width: 450px;
			display: block;
			margin: 5px 0;
		}

		.center {
			text-align: center;
		}

		div.block label {
			display: inline-block;
			width: 130px;
			text-align: right;
		}

		input,
		textarea {
			vertical-align: top;
		}
	</style>
	<script src="./lib/vue.min.js"></script>
	<script src="./lib/httpVueLoader.js"></script>
</head>

<body>
	<div id="app">
		<!--将整个屏幕分成左右两部分-->
		<div style="width:20%;float:left;height: 90%; ">
			<scanonwebui ref="scanobj"></scanonwebui>
			<div id="imageList"></div>
			<div>
				<input type="button" value="获取设备列表" v-on:click="loaddevices()" />
				<input type="button" value="开始扫描" v-on:click="startScan()" />
				<input type="button" value="清空扫描结果" v-on:click="clearAll()" />
				<input type="button" value="上传结果" v-on:click="uploadAllImageAsPdfFormat()" />
			</div>
			<div>
				<label style="color: red;margin-top: 15px;">注意本示例需要部署到web服务器下才可正常工作.</label>
				<p>
					<a href="https://www.brainysoft.cn/download/ScanOnWebH5Install.exe" target="_blank">扫描服务托盘程序下载</a>
					<a href="https://www.brainysoft.cn/video/scanh5.mp4" target="_blank">视频教程</a>
					<a href="tencent://message/?uin=20155031"><img src="http://wpa.qq.com/pa?p=1:20155031:4" border=”0″>咨询客服</a>
					<a href="https://www.brainysoft.cn" target="_blank">官方网站</a>
				</p>
			</div>
		</div>
		<div style="width:80%;float:right;height: 90%;">
			<iframe src="./pdf/viewer.html??file=http://127.0.0.1:1134/pdf" width="100%" height="99%"
				id="pdf_viewer"></iframe>
		</div>
	</div>

	<script src="./scanonweb.js" type="text/javascript"></script>
	<script type="text/javascript">
		Vue.use(httpVueLoader);

		//加载自定义vue组件
		const scanonwebui = httpVueLoader('scanonwebui.vue')

		var app = new Vue({
			el: '#app',
			data: {
				message: 'Hello Vue!'
			},
			components: {
				scanonwebui
			},
			methods: {
				loaddevices: function () {
					this.$refs.scanobj.scanonweb.loadDevices();
				},
				startScan: function () {
					//开始发送扫描指令					
					this.$refs.scanobj.startScan();
				},
				clearAll: function () {
					this.$refs.scanobj.scanonweb.clearAll();
					document.getElementById('pdf_viewer').contentWindow.location.reload();
				},
				//按照pdf格式上传所有扫描结果
				uploadAllImageAsPdfFormat: function () {
					this.$refs.scanobj.scanonweb.uploadAllImageAsPdfToUrl('http://localhost:8080/uploadpdf/upload', '1234', 'test');
				},
				//按照tiff格式上传所有扫描结果
				uploadAllImageAsTiffFormat:function(){
					this.$refs.scanobj.scanonweb.uploadAllImageAsTiffToUrl('http://localhost:8080/uploadtiff/upload', '1234', 'test');
				},
				//按照jpg格式上传多页扫描结果
				uploadAllImageAsJpgFormat:function(){
					var uploadUrl = 'http://localhost:8080/upload/uploadjpg';
					for (imageIndex = 0; imageIndex < scanonweb.imageCount; imageIndex++) {
						this.$refs.scanobj.scanonweb.uploadJpgImageByIndex(uploadUrl, '1234', 'test', imageIndex);
					}
				},
			}

		});
	</script>
</body>

</html>